<template>
    <!-- 头部 -->
    <div class="otodatapage">
        <div class="header">
            <div @click="go">
                <span>⬅</span>
            </div>
            <h2>特色课程</h2>
            <div class="search" @click="gosearch">
                <img src="@/assets/images/search.png" />
            </div>

        </div>

        <!-- 下拉框 -->

        <div class="course-fitler">
            <van-dropdown-menu>
                    <van-dropdown-item :title="title1"> 
                        日历

                            <div class="seach-btn">
                                <van-button type="default">重置</van-button>
                                <van-button type="warning">确定</van-button>
                            </div>
                    </van-dropdown-item>
                    <van-dropdown-item  :title="title3">
                            <div class="filter-box">
                                    <div class="tm-kind">
                                        <div class="tmk-item">
                                            <div class="small" v-for="item in option3" :key="item.type">{{item.value}}</div>
                                        </div>
                                    </div>
                                </div>
                    </van-dropdown-item>
            </van-dropdown-menu>

            <!-- 中间数据 -->
            <div class="otodata" v-for="(item,key) in otodata" :key="item.teacher_id"
                @click="yuyuedetail(item.teacher_id)">
                <div class="left">
                    <img class="otoimg" :src="item.avatar" alt="">
                    <div class="text">
                        <p>{{item.real_name}}</p>
                        <p>{{item.sex == 1 ? '女':'男'}} {{item.teach_age}}年教龄</p>
                    </div>
                </div>
                <div class="right">
                    预约
                </div>
            </div>
        </div>


        <Zhezhao></Zhezhao>


    </div>
</template>

<script>
    import { DropdownMenu, DropdownItem } from 'vant';
    import Zhezhao from "./zhezhao"
    import { sort } from "../api/index"
    import { Button } from 'vant';
    import { Calendar } from 'vant';
    import { otodata } from "../api/index"

    export default {
        name: 'Lesson',
        title: "",
        components: {
            [DropdownMenu.name]: DropdownMenu,
            [DropdownItem.name]: DropdownItem,
            [Button.name]: Button,
            [Calendar.name]: Calendar,
            Zhezhao,
        },
        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                date: '',
                show: false,
                otodata: [],

                title1: "选择上课时间",
                title3: "选择老师条件",
                option3: [
                    { type: 0, value: "全部" },
                    { type: 2, value: "大班课" },
                    { type: 3, value: "小班课" },
                    { type: 4, value: "公开课" },
                    { type: 5, value: "点播课" },
                    { type: 7, value: "面授课" },
                    { type: 8, value: "音频课" },
                    { type: 9, value: "系统课" },
                    { type: 10, value: "图文课" },
                    { type: 11, value: "会员课" }
                ],

            }
        },
        mounted() {
            this.oto();
        },
        methods: {
            async oto() {
                const res = await otodata()
                console.log(res, 1111)
                this.otodata = res.data;
                console.log(this.otodata)
            },
            gosearch() {
                this.$router.push("/gosearch")
            },
            formatDate(date) {
                return `${date.getMonth() + 1}/${date.getDate()}`;
            },
            onConfirm(date) {
                this.show = false;
                this.date = this.formatDate(date);
            },
            go() {
                this.$router.push("/")
            },
            yuyuedetail(teacher_id) {
                alert("id是：" + teacher_id)
                this.$router.push({
                    name: "Yuyuedetail",
                    query: {
                        ID: teacher_id
                    }
                })

            }
        }

    }



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .course-fitler {
        background: #eee;
    }

    .header {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: white;
    }

    .search img {
        width: 20px;
        height: 20px;
        line-height: 48px;
        margin-right: 10px;
    }

    .tm-kind {
        width: 100%;
        height: 100px;
        padding-bottom: 20px;
        border-bottom: 1px solid #f1f1f1;
    }

    p {
        display: flex;
        justify-content: left;
        font-size: 16px;
        font-weight: bold;
        color: rgba(89, 89, 89, 1);
    }

    .tmk-item {
        width: 100%;
        height: 100px;
        /* padding-bottom: 20px; */
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .small {
        margin: 2px;
        width: 22%;
        height: 30px;
        border-radius: 6px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #646464;
        text-align: center;
        line-height: 30px;
        overflow: hidden;
        background: rgba(245, 245, 245, 1);
    }

    .course-sort {
        background: #fff;
    }

    li {
        height: 45px;
        text-align: center;
        line-height: 45px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(89, 89, 89, 1);
        border-bottom: 1px solid #f5f5f5;
    }

    .seach-btn {
        padding: 30px 0px;
        display: flex;
        justify-content: center;
    }

    .otodata {
        width: 95%;
        height: 80px;
        margin: 10px;
        background: white;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .otoimg {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 20px;
    }

    .left {
        width: 180px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .text {
        width: 100px;
        height: 80px;
    }

    p {
        margin-top: 15px;
        font-size: 14px;
        line-height: 20px;
    }

    .right {
        background: #eee;
        width: 80px;
        height: 30px;
        line-height: 30px;
        border-radius: 30px;
        text-align: center;
        color: red;
    }
</style>